<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <a-row :gutter="[0,16]">
      <!-- TODO 搜索 -->
      <a-col :span="24">
        <a-form layout="inline" :form="searchForm">
          <a-form-item label="反馈内容">
            <a-input
                placeholder="请输入关键字"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                show-search
                placeholder="请选择反馈状态"
                style="width: 180px"
            >
              <a-select-option value="1">
                正常
              </a-select-option>

              <a-select-option value="0">
                停用
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="类型">
            <a-select
                show-search
                placeholder="请选择反馈类型"
                style="width: 180px"
            >
              <a-select-option value="1">
                建议
              </a-select-option>

              <a-select-option value="0">
                故障
              </a-select-option>
              <a-select-option value="2">
                帐号问题
              </a-select-option>
              <a-select-option value="3">
                其他
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-button type="primary">
              <a-icon type="search"/>
              搜索
            </a-button>
          </a-form-item>

        </a-form>
      </a-col>

    </a-row>

    <a-row :gutter="[0,16]">
      <!-- 分页列表区 -->
      <a-col :span="24">
        <a-table
            :rowKey="rowKey"
            :columns="columns"
            :data-source="data"
            :defaultExpandAllRows="true"
            :pagination="pagination"
            :loading="loading"
            @change="onTableChange"
            bordered
        >

          <!-- 类型-->
          <div slot="type" slot-scope="status">
            <template v-if="status === 1">
              <!--TODO 自行修改样式-->
              <span style="color: #00c03a">
                建议
              </span>
            </template>
            <template v-else-if="status === 2">
              <!--TODO 自行修改样式-->
              <span style="color: #c20e0e">
                故障
              </span>
            </template>
            <template v-else-if="status === 3">
              <!--TODO 自行修改样式-->
              <span style="color: #4074f3">
                帐号问题
              </span>
            </template>
            <template v-else-if="status === 4">
              <!--TODO 自行修改样式-->
              <span style="color: #4e0577">
                其他
              </span>
            </template>
          </div>

          <!-- 状态 -->
          <div slot="status" slot-scope="status">
            <template v-if="status === 1">
              <!--TODO 自行修改样式-->
              <span style="color: #9a6d0e">
                待处理
              </span>
            </template>
            <template v-else-if="status === 2">
              <!--TODO 自行修改样式-->
              <span style="color: #5c63d4">
                已回复
              </span>
            </template>
            <template v-else-if="status === 3">
              <!--TODO 自行修改样式-->
              <span style="color: #61aa07">
                已解决
              </span>
            </template>
            <template v-else-if="status === 4">
              <!--TODO 自行修改样式-->
              <span style="color: #9d0000">未解决</span>
            </template>
          </div>
          <!--答复-->
          <div slot="reply" slot-scope="index,item">
            <template v-if="item.reply == null">
              <a-button-group style="display: flex">
                <a-button @click="showReply(item)" type="link">回复</a-button>
              </a-button-group>
            </template>
            <template v-el>
              {{ item.reply }}
            </template>
          </div>
        </a-table>

      </a-col>

    </a-row>

    <a-modal
        title="反馈内容"
        :visible="showContent"
        @cancel="handleCancel"
        @ok="handleConfirm"
    >
      <a-form
          class="modify-form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="反馈人">
          <div>{{feedBackDetail.feedbackUser}}</div>
        </a-form-item>
        <a-form-item label="反馈类型">
          <div>{{feedBackDetail.type}}</div>
        </a-form-item>

        <a-form-item label="反馈信息">
          <a-textarea
              v-model="feedBackDetail.content"
              placeholder="反馈信息"
              :autoSize="{ minRows: 3, maxRows: 5 }"
              disabled
          />
        </a-form-item>
        <a-form-item label="反馈信息">
          <a-textarea
              v-model="feedBackDetail.reply"
              placeholder="回复信息"
              :autoSize="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getFeedbacks, handleProcess} from "@/services/advice";

export default {
  name: 'Advice',
  data() {
    return {
      columns: [
        {
          title: '反馈ID',
          dataIndex: 'id',
        },
        {
          title: '反馈人',
          dataIndex: 'feedbackUser',
        },
        {
          title: '反馈类型',
          dataIndex: 'type',
          scopedSlots: {
            customRender: 'type'
          }
        },
        {
          title: '反馈时间',
          dataIndex: 'createTime'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          }
        },
        {
          title: '反馈内容',
          dataIndex: 'content'
        },


        {
          title: '答复人',
          dataIndex: 'processUser'
        },
        {
          title: '答复',
          dataIndex: 'reply',
          scopedSlots: {customRender: 'reply'}
        },
        {
          title: '答复时间',
          dataIndex: 'processTime'
        },
        {
          title: '备注',
          dataIndex: 'remark'
        }

      ],
      data: [],
      rowKey: '',
      searchForm: {},
      pagination: {
        current: 1,
        pageSize: 15,
        pageSizeOptions: ["15", "20", "30"],
        showTotal: (total) => {
          return " 共 " + total + " 条";
        },
        total: 0,
        showQuickJumper: true,
        showSizeChanger: true,
      },
      showContent: false,
      // 反馈详情
      feedBackDetail: {
        feedbackUser: '',
        type: '',
        reply: '',
        content: ''
      },
      loading: false
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
  },
  mounted() {
    this.getFeedBacks()
  },
  methods: {
    // 获取用户数据
    getFeedBacks() {
      getFeedbacks().then((res) => {
        console.log(res.data)
        this.data = res.data.data.list
        this.pagination.total = res.data.data.total
        this.pagination.current = res.data.data.pageNum
      })
    },
    changeStatusValue(status) {
      if (status == 1) {
        return 0;
      } else if (status == 0) {
        return 1;
      }
    },
    onTableChange(pagination) {
      let page = pagination.current;
      let pageSize = pagination.pageSize;
      if (this.pagination.current !== page) {
        // 当前为切换页面操作
        // 如果更改了pageSize则更改data中的size
        if (this.pagination.pageSize !== pageSize) {
          this.pagination.pageSize = pageSize;
        }
        //开启加载动画
        this.loading = true;
        this.pagination.current = page;
        getFeedbacks(page, pageSize).then((res) => {
          this.data = res.data.data.list
          this.pagination.total = res.data.data.total
          setTimeout(() => (this.loading = false), 10); // 关闭加载动画
        })
      } else if (this.pagination.pageSize !== pageSize) {
        // 当前为更改pageSize操作
        this.pagination.pageSize = pageSize;
        //开启加载动画
        this.loading = true;
        getFeedbacks(page, pageSize).then((res) => {
          this.data = res.data.data.list
          this.pagination.total = res.data.data.total
          setTimeout(() => (this.loading = false), 10); // 关闭加载动画
        })
      }
    },
    // 作为测试
    log(obj) {
      console.log(obj)
    },
    // 显示回复模态框
    showReply(item) {
      this.feedBackDetail.id = item.id
      this.feedBackDetail.type = this.formatType(item.type)
      this.feedBackDetail.content = item.content
      this.feedBackDetail.feedbackUser = item.feedbackUser
      this.showContent = true
    },
    // 格式化type
    formatType(type) {
      switch (type) {
        case 1:
          return '建议'
        case 2:
          return '故障'
        case 3:
          return '帐号问题'
        case 4:
          return '其他'
      }
    },
    /*模态框被点击取消*/
    handleCancel(){
      this.feedBackDetail = {}
      this.showContent = false
    },
    /*模态框提交回复*/
    handleConfirm(){
      if (this.feedBackDetail.reply.length >0){
        let params = {
          'id': this.feedBackDetail.id,
          'remark': '中台回复的消息',
          'reply': this.feedBackDetail.reply
        }
        handleProcess(params).then((res)=>{
          console.log(res)
          if (res.data.code === '1000'){
            // 成功
            this.showContent = false
            // 更新当前页的列表
            getFeedbacks(this.pagination.current,this.pagination.pageSize).then((res) => {
              this.data = res.data.data.list
              this.pagination.total = res.data.data.total
            })
            this.$message.success("答复成功!")
          }

        })
      }else{
        this.$message.error("请填写回复内容!")
        return;
      }
    }
  }
}
</script>
